<template>
  <div id="top">

    <div id="top_navi">
      <div class="time_blog_title">程序员驿站</div>

      <div id="second_navi">
        <ul>
          <li @click="linkPush('/index')">首页</li>
          <li @click="linkPush('/write')">写文章</li>

          <li v-if="!isLogin" @click="linkPush('/login')">登入</li>
          <li v-if="!isLogin">|</li>
          <li v-if="!isLogin" @click="linkPush('/register')">注册</li>

          <li v-if="isLogin" id="welcome"   @mouseover="display(true)" @mouseout="display(false)">
            <ul>
              <li>{{userName}}</li>
              <li @click="linkPush('/profile')" v-show="isVisible">我的博客</li>
              <li @click="quit" v-show="isVisible">退出</li>
            </ul>
          </li>

          <li>关于我们</li>
        </ul>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: "top",
  data(){
    return {
      isVisible: false,
      isLogin: false,
      userName: ""
    }
  },
  mounted(){
    if(window.sessionStorage.getItem("userName")){
      this.isLogin = true
      this.userName = window.sessionStorage.getItem("userName")
    }
  },
  methods:{
    display(x){
      this.isVisible = x
    },
    linkPush(addr){
      if(this.$route.path !== addr){
        window.open(addr)
      }
    },
    quit(){
      window.sessionStorage.setItem("userId","")
      window.sessionStorage.setItem("userName","")
      location.reload()
    }
  }
}
</script>

<style scoped>
#top_navi{
  position: relative;
  height:80px;
  background-color: #6DBCDB;
  z-index: 101;
}
/*编程时光*/
.time_blog_title{
  height:80px;
  font-size:30px;
  line-height:80px;
  color:white;
  margin-left:30px;
}


#second_navi{
  position: absolute;
  height:40px;

  bottom:0;
  right:0;
  margin-right:20px;
}
#second_navi ul{
  list-style-type:none;
  padding: 0;
  margin:0;
}
#second_navi > ul > li{
  display:inline-block;
  padding-left:30px;
  color:white;
  line-height: 40px;
  font-size:20px;

  vertical-align: top;

  cursor:pointer;
}

#welcome li{
  display: block;
  color:white;

}
#welcome li:nth-child(2),#welcome li:last-child{
  background-color: #6DBCDB;
  border-top:1px solid white;
}

</style>
